
<!DOCTYPE html>
<html lang="zh">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>自定义视图分页</title>
    <link href="/static/resource/css/bootstrap.min.css?v=3.3.7" rel="stylesheet"/>
    <link href="/static/resource/css/font-awesome.min.css?v=4.7.0" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="/static/resource/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.22.6" rel="stylesheet"/>
    <link href="/css/animate.min.css?v=20210831" rel="stylesheet"/>
    <link href="/static/resource/css/style.css?v=20210831" rel="stylesheet"/>
    <link href="/static/resource/ruoyi/css/ry-ui.css?v=4.7.9" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-page-size="15"
                   data-show-custom-view="true" data-custom-view="customViewFormatter"
                   data-custom-view-default-view="true">
            </table>
        </div>
    </div>
</div>


<div>
    <script> var ctx = "\/"; var lockscreen = null; if(lockscreen){window.top.location=ctx+"lockscreen";} </script>
    <a id="scroll-up" href="javascript:;" class="btn btn-sm display"><i class="fa fa-angle-double-up"></i></a>
    <script src="/static/resource/js/jquery.min.js?v=3.6.3"></script>
    <script src="/static/resource/js/bootstrap.min.js?v=3.3.7"></script>
    <!-- bootstrap-table 表格插件 -->
    <script src="/static/resource/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.22.6"></script>
    <script src="/static/resource/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.22.6"></script>
    <script src="/static/resource/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.22.6"></script>
    <!-- jquery-validate 表单验证插件 -->
    <script src="/static/resource/ajax/libs/validate/jquery.validate.min.js?v=1.19.3"></script>
    <script src="/static/resource/ajax/libs/validate/jquery.validate.extend.js?v=1.19.3"></script>
    <script src="/static/resource/ajax/libs/validate/messages_zh.js?v=1.19.3"></script>
    <!-- bootstrap-table 表格树插件 -->
    <script src="/static/resource/ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.22.6"></script>
    <!-- 遮罩层 -->
    <script src="/static/resource/ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
    <script src="/static/resource/ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
    <script src="/static/resource/ajax/libs/layer/layer.min.js?v=3.7.0"></script>
    <script src="/static/resource/ajax/libs/layui/layui.min.js?v=2.8.18"></script>
    <script src="/static/resource/ruoyi/js/common.js?v=4.7.9"></script>
    <script src="/static/resource//ruoyi/js/ry-ui.js?v=4.7.9"></script>
</div>

<script src="/static/resource/ajax/libs/bootstrap-table/extensions/custom-view/bootstrap-table-custom-view.js?v=1.22.6"></script>

<script>
    var prefix = ctx + "demo/table";
    var datas = [{"dictCode":6,"dictSort":1,"dictLabel":"\u6B63\u5E38","dictValue":"0","dictType":"sys_normal_disable","cssClass":"","listClass":"primary","isDefault":"Y","status":"0","default":true},{"dictCode":7,"dictSort":2,"dictLabel":"\u505C\u7528","dictValue":"1","dictType":"sys_normal_disable","cssClass":"","listClass":"danger","isDefault":"N","status":"0","default":false}];

    $(function() {
        var options = {
            url: prefix + "/list",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            showExport: true,
            columns: [{
                checkbox: true
            },
                {
                    field : 'userId',
                    title : '用户ID'
                },
                {
                    field : 'userCode',
                    title : '用户编号'
                },
                {
                    field : 'userName',
                    title : '用户姓名'
                },
                {
                    field : 'userPhone',
                    title : '用户手机'
                },
                {
                    field : 'userEmail',
                    title : '用户邮箱'
                },
                {
                    field : 'userBalance',
                    title : '用户余额'
                },
                {
                    field: 'status',
                    title: '用户状态',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:;"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:;"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    function customViewFormatter (data) {
        var template = $('#profileTemplate').html()
        var view = ''
        $.each(data, function (i, row) {
            view += template.replace('RPL_userCode', row.userCode)
                .replace('RPL_IMAGE', "img/profile.jpg")
                .replace('RPL_userName', row.userName)
                .replace('RP_userEmail', row.userEmail)
                .replace('RPL_userPhone', row.userPhone)
                .replace('RPL_userBalance', row.userBalance);
        })

        return `<div class="row mx-0">${view}</div>`
    }
</script>


<template id="profileTemplate">
    <div class="col-sm-3 col-lg-2">

        <div class="contact-box">
            <a href="profile.html">
            <div class="my_card_head" style="width: 100%;height: 100px;background-image:url('/static/resource/RPL_IMAGE')">
                <div class="my_card_title">RPL_userName</div>
            </div>
            </a>

            <div style="padding: 10px">
                <h3><strong>RPL_userCode</strong></h3>
                <p><i class="fa fa-jpy"></i> RPL_userBalance</p>
                <address>
                    <strong>RuoYi, Inc.</strong><br>
                    E-mail: RPL_userEmail<br>
                    <abbr title="Phone">Tel:</abbr> RPL_userPhone
                </address>
            </div>
            <div class="clearfix"></div>

        </div>
    </div>
</template>
<style>
    .my_card_head {
        display: flex;
        flex-direction: column; /* 使子项垂直排列 */
        width: 100%;
        height: 100px;
        background-image: url('/static/resource/RPL_IMAGE.jpg'); /* 确保有正确的文件扩展名 */
        background-size: cover; /* 或者其他你想要的背景图片大小设置 */
        background-position: center; /* 背景图片居中显示 */

        box-sizing: border-box; /* 确保padding不会增加元素的宽度 */
    }

    .my_card_title {
        color: #fff; /* 假设你想让文字颜色为白色，以便在图片上清晰可见 */
        margin-top: auto; /* 将title推至底部 */
        text-align: left; /* 可选，让文字在#name中居中 */
        padding-left: 10px; /* 可选，为内容添加一些内边距 */
        background-color: rgba(128, 128, 128, 0.2); /* 灰色，20%透明度 */
    }
</style>
</body>
</html>